<template>
  <el-dialog
    :title="!dataForm.id ? '模板详情' : ''"
    :close-on-click-modal="false"
    :visible.sync="visible"
    width="1000px"
  >
    <el-form :model="dataForm" ref="dataForm" label-width="80px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="名称:" prop="name">
            {{ dataForm.name }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="主题:" prop="realName">
            {{ dataForm.theme }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="模板内容:" prop="realName">
           <div class="content">
            <p v-html="dataForm.content"></p>
             </div>
          </el-form-item>
        </el-col>
        
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: "emsgemailtemplate-detils",
  data() {
    return {
      visible: false,
      dataForm: {
        name:'',
        theme:'',
        content:''
      },
    };
  },
  created() {},
  methods: {
    init(id) {
      this.visible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].resetFields();
        if (id) {
          this.$http({
            url: this.$http.adornUrl(`/emsgemailtemplate/info/${id}`),
            method: "get",
            params: this.$http.adornParams(),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.dataForm.name= data.emsgEmailTemplate.name;
              this.dataForm.theme= data.emsgEmailTemplate.theme;
              this.dataForm.content=data.emsgEmailTemplate.content ;
            }
          });
        }
      });
    },
  },
};
</script>
<style scoped>
.el-col {
  word-break: break-all;
}
.content{
  border-radius: 5px;
  height: 400px;
  overflow-y: auto;
  -ms-overflow-style:none;
  overflow: -moz-scrollbars-none;overflow-x:hidden; 
  border: 1px solid skyblue;
  background-color: whitesmoke;
}
</style>
